<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { workAdd, workLists, workUpdate } from '@/api/interface/web/work'
import { ElMessage, ElMessageBox } from 'element-plus'
import WorkForm from '@/components/form/WorkForm.vue'
import router from '@/router'
import { LEVELOPTIONS, LEVELSTATUSOPTIONS } from '@/constant/options'

const fullscreenLoading = ref(false)

const baseTableRef = ref()
const workFormRef = ref()
const userStore = useUserStore()
const searchForm = ref<any>({})
const conditionMethod = () => {
  const cond: any = {}
  Object.keys(searchForm.value).map((key) => {
    if (searchForm.value[key] || searchForm.value[key] === 0) {
      cond[key] = searchForm.value[key]
    }
  })
  cond.userId = userStore.userInfo.id
  return cond
}

const dialogVisible = ref(false)
const addEditStatus = ref('add')
const workItem: any = ref({})
const handleAddWork = () => {
  dialogVisible.value = true
}
const handleDialogClose = () => {
  dialogVisible.value = false
}
const handleDialogSubmit = () => {
  fullscreenLoading.value = true
  workFormRef.value.submitForm().then((data: any) => {
    if (data) {
      if (addEditStatus.value === 'add') {
        workAdd({ ...data, userId: userStore.userInfo.id })
          .then(() => {
            ElMessage({
              type: 'success',
              message: '新增成功',
            })
            dialogVisible.value = false
            baseTableRef.value.refresh()
          })
          .finally(() => {
            fullscreenLoading.value = false
          })
      } else if (addEditStatus.value === 'edit') {
      }
    } else {
      fullscreenLoading.value = false
    }
  })
}

const handleDetail = async (row: any) => {
  workItem.value = row
  dialogVisible.value = true
  addEditStatus.value = 'read'
  router.push({ path: '/workMessage', query: { id: row.id } })
}

const handleClose = (row: any) => {
  if (row.status == '2') return
  ElMessageBox.confirm('确认关闭?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    autofocus: false,
  }).then(() => {
    fullscreenLoading.value = true
    workUpdate({ id: row.id, status: '2' })
      .then(() => {
        ElMessage({
          message: '关闭成功!',
          type: 'success',
        })
        baseTableRef.value.refresh()
      })
      .finally(() => {
        fullscreenLoading.value = false
      })
  })
}

const formatterTable = (data: any) => {
  console.log(data)
  return data.map((v: any) => {
    return {
      ...v,
      levelLabel: LEVELOPTIONS.filter((levelV: any) => levelV.value == v.level)[0].label,
      statusLabel: LEVELSTATUSOPTIONS.filter((statusV: any) => statusV.value == v.status)[0].label,
    }
  })
}

onMounted(() => {
  if (!userStore.userInfo) {
    router.push('/home')
    return
  }
})
</script>

<template>
  <BasePage v-loading.fullscreen="fullscreenLoading">
    <template #title> 工单历史 </template>
    <template #toolbar>
      <el-button @click="handleAddWork"> 添加工单 </el-button>
    </template>
    <BaseTable
      ref="baseTableRef"
      :init-table-method="workLists"
      :refresh-key="baseTableRef"
      :condition-method="conditionMethod"
      :formatter-table="formatterTable"
      :attributes="{ border: true }"
    >
      <el-table-column
        prop="title"
        label="标题"
        min-width="100"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column prop="levelLabel" label="工单等级" min-width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="statusLabel" label="工单状态" min-width="100" show-overflow-tooltip>
        <template #default="scope">
          <div class="status-box">
            <div v-if="scope.row.status == '0'" class="status-icon info"></div>
            <div v-if="scope.row.status == '1'" class="status-icon success"></div>
            <div v-if="scope.row.status == '2'" class="status-icon close"></div>
            <div class="status-label">{{ scope.row.statusLabel }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="添加时间"
        min-width="100"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="添加时间"
        min-width="100"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" link @click="handleDetail(scope.row)">查看</el-button>
          <el-button
            type="danger"
            link
            @click="handleClose(scope.row)"
            :disabled="scope.row.status == '2'"
            >关闭</el-button
          >
        </template>
      </el-table-column>
    </BaseTable>
  </BasePage>

  <BaseDialog v-model="dialogVisible" width="35%">
    <template #title>
      <div>{{ addEditStatus === 'add' ? '新增工单' : '编辑工单' }}</div>
    </template>
    <template #buttons>
      <el-button type="info" text bg @click="handleDialogClose">取消</el-button>
      <el-button type="primary" @click="handleDialogSubmit">完成</el-button>
    </template>
    <WorkForm ref="workFormRef" :data="workItem" :status="addEditStatus"></WorkForm>
  </BaseDialog>
</template>
<style lang="scss" scoped>
.status-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .status-icon {
    width: 6px;
    height: 6px;
    border-radius: 100px;
    margin-right: 5px;
  }

  .status-icon.info,
  .status-icon.close {
    background-color: var(--theme-color-info);
  }

  .status-icon.success {
    background-color: var(--theme-color-success);
  }
}
</style>
